<template>
  <div class="settings-container">
    <div class="page-header">
      <h2>系统设置</h2>
      <p>管理系统配置参数</p>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>基础设置</span>
          </template>
          
          <el-form :model="baseSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="baseSettings.systemName" />
            </el-form-item>
            <el-form-item label="管理员邮箱">
              <el-input v-model="baseSettings.adminEmail" />
            </el-form-item>
            <el-form-item label="公告内容">
              <el-input
                v-model="baseSettings.announcement"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBaseSettings">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>权限设置</span>
          </template>
          
          <el-form :model="permissionSettings" label-width="120px">
            <el-form-item label="自动分配">
              <el-switch v-model="permissionSettings.autoAssign" />
            </el-form-item>
            <el-form-item label="匿名反馈">
              <el-switch v-model="permissionSettings.anonymousFeedback" />
            </el-form-item>
            <el-form-item label="邮件通知">
              <el-switch v-model="permissionSettings.emailNotification" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePermissionSettings">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>系统信息</span>
          </template>
          
          <el-descriptions :column="3" border>
            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="运行状态">正常</el-descriptions-item>
            <el-descriptions-item label="最后更新">2024-01-01</el-descriptions-item>
            <el-descriptions-item label="数据库">MySQL 8.0</el-descriptions-item>
            <el-descriptions-item label="服务器">Spring Boot 2.7</el-descriptions-item>
            <el-descriptions-item label="前端框架">Vue 3</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'AdminSettings',
  setup() {
    const baseSettings = ref({
      systemName: '环保公众监督系统',
      adminEmail: 'admin@env.com',
      announcement: '欢迎使用环保公众监督系统！'
    })
    
    const permissionSettings = ref({
      autoAssign: true,
      anonymousFeedback: false,
      emailNotification: true
    })
    
    const saveBaseSettings = () => {
      // TODO: 实现保存基础设置的逻辑
      ElMessage.success('基础设置保存成功！')
    }
    
    const savePermissionSettings = () => {
      // TODO: 实现保存权限设置的逻辑
      ElMessage.success('权限设置保存成功！')
    }
    
    return {
      baseSettings,
      permissionSettings,
      saveBaseSettings,
      savePermissionSettings
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}
</style> 